import React, {useEffect, useState, useRef} from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Animated } from 'react-native';
// import { RNCamera } from 'react-native-camera';
import {router, Stack} from "expo-router";
import NavBack from "@/components/navBack";

const ScannerWithTransparentCenter = () => {
    const [scanned, setScanned] = useState(false);
    const scanLinePosition = useRef(new Animated.Value(0)).current;

    const handleBarCodeScanned = ({ data }) => {
        setScanned(true);
        alert(`Scanned Data: ${data}`);
    };

    useEffect(() => {
        // 扫描线动画
        Animated.loop(
            Animated.timing(scanLinePosition, {
                toValue: 280, // 扫描框高度对应的动画距离
                duration: 2000,
                useNativeDriver: true,
            })
        ).start();
    }, []);

    return (
        <View style={styles.container}>
            <Stack.Screen
                options={{ headerShown: false }}
            />
            <View style={styles.navContainer}>
                <NavBack title={'扫描二维码'} backColor={'#fff'} titleColor={"#fff"} />
            </View>
            {/*<RNCamera*/}
            {/*    style={styles.camera}*/}
            {/*    type={RNCamera.Constants.Type.back}*/}
            {/*    onBarCodeRead={!scanned ? handleBarCodeScanned : undefined}*/}
            {/*    captureAudio={false}*/}
            {/*>*/}
            {/*    /!* 半透明遮罩 *!/*/}
            {/*    <View style={styles.overlay}>*/}
            {/*        /!* 上部遮罩 *!/*/}
            {/*        <View style={[styles.overlayPart, styles.overlayTop]} />*/}
            {/*        /!* 左部遮罩 *!/*/}
            {/*        <View style={[styles.overlayPart, styles.overlayLeft]} />*/}
            {/*        /!* 右部遮罩 *!/*/}
            {/*        <View style={[styles.overlayPart, styles.overlayRight]} />*/}
            {/*        /!* 下部遮罩 *!/*/}
            {/*        <View style={[styles.overlayPart, styles.overlayBottom]} />*/}

            {/*        /!* 中间透明区域标识 *!/*/}
            {/*        <View style={styles.scanBox} >*/}
            {/*            <Text style={styles.qrText}>将二维码放入框内，即可自动扫描</Text>*/}

            {/*            <View style={[styles.corner, styles.topLeft]} />*/}
            {/*            /!* 右上角 *!/*/}
            {/*            <View style={[styles.corner, styles.topRight]} />*/}
            {/*            /!* 左下角 *!/*/}
            {/*            <View style={[styles.corner, styles.bottomLeft]} />*/}
            {/*            /!* 右下角 *!/*/}
            {/*            <View style={[styles.corner, styles.bottomRight]} />*/}
            {/*            /!* 扫描线 *!/*/}
            {/*            <Animated.View*/}
            {/*                style={[*/}
            {/*                    styles.scanLine,*/}
            {/*                    {*/}
            {/*                        transform: [{ translateY: scanLinePosition }],*/}
            {/*                    },*/}
            {/*                ]}*/}
            {/*            />*/}
            {/*        </View>*/}
            {/*    </View>*/}

            {/*    {scanned && (*/}
            {/*        <TouchableOpacity style={styles.button} onPress={() => setScanned(false)}>*/}
            {/*            <Text style={styles.buttonText}>再次扫描</Text>*/}
            {/*        </TouchableOpacity>*/}
            {/*    )}*/}



            {/*</RNCamera>*/}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    camera: {
        flex: 1,
    },
    overlay: {
        ...StyleSheet.absoluteFillObject,
    },
    navContainer: {
        backgroundColor: "red",
        position: "absolute",
        zIndex: 9,
        width: "100%",
        top: 0,
    },
    overlayPart: {
        position: 'absolute',
        backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明背景色
    },
    overlayTop: {
        top: 0,
        left: 0,
        right: 0,
        height: '30%', // 上部遮罩高度
    },
    overlayBottom: {
        bottom: 0,
        left: 0,
        right: 0,
        height: '30%', // 下部遮罩高度
    },
    overlayLeft: {
        top: '30%',
        bottom: '30%',
        left: 0,
        width: '10%', // 左部遮罩宽度
    },
    overlayRight: {
        top: '30%',
        bottom: '30%',
        right: 0,
        width: '10%', // 右部遮罩宽度
    },
    scanBox: {
        position: 'absolute',
        top: '30%',
        left: '10%',
        width: '80%',
        height: '40%',
        borderColor: '#fff', // 中间扫描框边框颜色
        borderWidth: 2,
    },
    button: {
        position: 'absolute',
        bottom: 50,
        alignSelf: 'center',
        backgroundColor: '#00FF00',
        paddingHorizontal: 20,
        paddingVertical: 10,
        borderRadius: 5,
    },
    buttonText: {
        color: '#fff',
        fontSize: 16,
    },
    qrText: {
        fontSize: 12,
        color: '#9E9E9E',
        position: 'absolute',
        bottom: -30,
        left: "25%",
        textAlign: 'center',
    },
    corner: {
        width: 30,
        height: 30,
        position: 'absolute',
        borderColor: '#EC6138', // 角标的颜色
    },
    topLeft: {
        top: 0,
        left: 0,
        borderLeftWidth: 4, // 左侧边框
        borderTopWidth: 4, // 上侧边框
    },
    topRight: {
        top: 0,
        right: 0,
        borderRightWidth: 4,
        borderTopWidth: 4,
    },
    bottomLeft: {
        bottom: 0,
        left: 0,
        borderLeftWidth: 4,
        borderBottomWidth: 4,
    },
    bottomRight: {
        bottom: 0,
        right: 0,
        borderRightWidth: 4,
        borderBottomWidth: 4,
    },
    scanLine: {
        position: 'absolute',
        width: '100%',
        height: 2,
        backgroundColor: '#FF0000', // 扫描线的颜色
    },
});

export default ScannerWithTransparentCenter;
